<template>
  <div class="warp">
    <div>
      <el-row :gutter="24">
        <el-form
          ref="elForm"
          :model="formData"
          :rules="rules"
          size="medium "
          label-width="10px"
        >
          <!-- 关键字 -->
          <el-col :span="5">
            <el-form-item label-width="100px" label="关键字" prop="field102">
              <el-input
                v-model="formData.field102"
                placeholder="维修申请单名称、单号"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <!-- 申请船舶 -->
          <el-col :span="5">
            <el-form-item prop="field101" label-width="100px" label="申请船舶">
              <el-select
                v-model="formData.field101"
                placeholder="请选择申请船舶"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in field101Options"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 申请部门 -->
          <el-col :span="5">
            <el-form-item prop="field101" label-width="100px" label="部门">
              <el-select
                v-model="formData.field101"
                placeholder="请选择部门"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in field101Options"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 建议维修类型 -->
          <el-col :span="4">
            <el-form-item
              prop="field101"
              label-width="100px"
              label="建议维修类型"
            >
              <el-select
                v-model="formData.field101"
                placeholder="建议维修类型"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in field101Options"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 紧急程度 -->
          <el-col :span="5">
            <el-form-item prop="field101" label-width="100px" label="紧急程度">
              <el-select
                v-model="formData.field101"
                placeholder="请选择紧急程度"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in field101Options"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 预计维修日期· -->
          <el-col :span="10">
            <el-form-item
              label-width="100px"
              label="预计维修日期"
              prop="field103"
            >
              <el-date-picker
                type="daterange"
                v-model="formData.field103"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :style="{ width: '100%' }"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                range-separator="至"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <el-row :gutter="15" class="layout-items-center">
        <el-col :span="3">
          <el-button
            size="medium"
            type="primary"
            icon="el-icon-search"
            @click="submitForm"
            >查询</el-button
          >
          <el-button size="medium" icon="el-icon-delete" @click="resetForm"
            >重置</el-button
          >
        </el-col>
      </el-row>

      <el-table
        :data="tableData"
        style="width: 100%; margin: 20px 0"
        max-height="500"
        border
      >
        <el-table-column fixed type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column
          fixed
          prop="date"
          label="维修设备/项目"
          min-width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="申请单号"
          min-width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="province"
          label="申请船舶"
          min-width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="city"
          label="部门"
          min-width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="city"
          label="申请人/申请日期"
          min-width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="city"
          label="建议维修类型"
          min-width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="紧急程度"
          min-width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="zip"
          label="预计维修日期"
          min-width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="zip"
          label="预计维修地点"
          min-width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="zip"
          label="维修申请单名称"
          min-width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="zip"
          label="维修原因"
          min-width="140"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          min-width="100"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small"
            >
              完成
            </el-button>
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small"
            >
              取消
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        field101: undefined,
        field102: undefined,
        field103: undefined,
        field105: undefined,
        field106: [1],
      },
      rules: {
        field101: [],
        field102: [
          {
            message: "搜索关键字",
            trigger: "blur",
          },
        ],
        field106: [],
      },
      field101Options: [
        {
          label: "选项一",
          value: 1,
        },
        {
          label: "选项二",
          value: 2,
        },
      ],
      field106Options: [
        {
          label: "隐藏其他人草稿单",
          value: 1,
        },
      ],
      checked: false,
      tableData: [
        {
          date: "SP-S25020601",
          name: "华福油5",
          province: "轮机部",
          city: "2025-02-06",
          address: "2025-03-06",
          zip: "项数：物料/采购项数：1",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
      ],
    };
  },
  created() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.warp {
  padding: 30px 20px;
  background-color: white;
  margin: 15px;
  border-radius: 20px;
  height: calc(100vh - 120px);
  overflow: auto;
}
</style>
